<template>
  <div class="query-page">
    <div class="q-header">
      <span>3、请选择您喜欢的专业（可多选）</span>
      <p class="tip">注:关键字搜索查询与学科门类查询不可同时进行</p>
    </div>
    <div class="query-wrap putong-wrap" :class="[{'grey': zhuanyeArr.length && !selectArr.length}]">
      <p class="qw-title">a、普通专业关键字搜索查询</p>
      <p class="qw-tip">输入关键字后，将为您匹配相关专业，您可以在下拉框中进行选择</p>
      <zy-search :examType="examType" @searchCallback="searchDone" ref="search"></zy-search>
      <ul class="pt-list">
        <li v-for="(item, idx) in selectArr" :key="idx">
          {{item.name}}
          <i class="iconfont icon-shanchu i-close" @click="delPutong(idx, item)"></i>
        </li>
      </ul>
    </div>
    <div class="query-wrap zhuanye-wrap" :class="[{'grey': selectArr.length && !zhuanyeArr.length}]">
      <p class="qw-title">b、专业学科门类查询（最多选择3个）</p>
      <button-tab v-model="zhuanyeTab" class="zy-tab">
        <button-tab-item @on-item-click="zhuanyeClick()">本科</button-tab-item>
        <button-tab-item @on-item-click="zhuanyeClick()">专科</button-tab-item>
      </button-tab>
      <div class="">
        <ul class="zy-list clearfix" v-if="zhuanyeTab == 0">
          <li v-for="(item, idx) in bkData" :class="[zhuanye[idx] == 1 ? 'active': '']" :key="idx" @click="selectZhuanye(idx, item)">{{item}}</li>
        </ul>
        <ul class="zy-list zk-list clearfix" v-else>
          <li v-for="(item, idx) in zkData" :class="[zhuanye[idx] == 1 ? 'active': '']" :key="idx" @click="selectZhuanye(idx, item)">
            <span class="content" :class="[{'min': item.length <= 4}]">{{item}}</span>
          </li>
        </ul>
      </div>
    </div>

    <div class="btn-next-group">
      <div class="search-tip">
        <div class="" v-if="selectArr.length && !zhuanyeArr.length">已启用关键字搜索查询</div>
        <div class="" v-if="zhuanyeArr.length && !selectArr.length">已启用学科门类查询</div>
      </div>
      <a href="javascript:;" class="btn-next" @click="queryNext()">下一步</a>
    </div>
  </div>
</template>

<script>
import Utils from '@/common/utils.js';
import Api from '@/api/index.js';
import zySearch from '@/components/zySearch.vue'
import { ButtonTab, ButtonTabItem } from 'vux'
export default {
  components: {
    zySearch,
    ButtonTab,
    ButtonTabItem
  },
  data() {
    return {
      examType: '',  // 考生类型
      selectArr: [],
      currentSelect: [],
      bkData: [],  // 专业大类选择
      zhuanyeArr: [],
      zhuanye: [],
      zkData: [],
      zhuanyeTab: 0
    }
  },
  created() {
    Api.getCategoryList().then(res => {
      if (res.code == 20000) {
        this.bkData = res.data.array.filter(v => { return v.mlevel == '本科' }).map(v => { return v.name });
        this.zkData = res.data.array.filter(v => { return v.mlevel == '高职' }).map(v => { return v.name });
        if (Utils.session('zhuanye')) {
          this.zhuanye = (Utils.session('zhuanye'));
          if (this.zhuanye.length == this.bkData.length) {
            this.zhuanyeTab = 0;
          } else {
            this.zhuanyeTab = 1;
          }
        }else {
          this.zhuanyeTab = 0;
          this.zhuanye = Array(this.bkData.length).fill(0);
        }
        
      }
    })
    let _userData = Utils.local('userData')
    if (_userData) {
      this.examType = (_userData).examType
    }
    // 已选项赋值
    if (Utils.session('selectArr')) {
      this.selectArr = (Utils.session('selectArr'))
    }
    if (Utils.session('zhuanyeArr')) {
      this.zhuanyeArr = (Utils.session('zhuanyeArr'))
    }

  },
  methods: {
    // 选择专业学科门类
    selectZhuanye(zyIdx, zyName) {
      if (this.selectArr.length) return false
      if (this.zhuanye[zyIdx] === 1) {
        this.$set(this.zhuanye, zyIdx, 0)
        this.zhuanyeArr.splice(this.zhuanyeArr.indexOf(zyName), 1)
      } else if (this.zhuanyeArr.length > 2) {
        this.$vux.toast.show({
          text: '专业学科门类最多可选择3个',
          type: 'text',
          width: '80%'
        })
      } else if (this.zhuanye[zyIdx] === 0) {
        this.$set(this.zhuanye, zyIdx, 1)
        this.zhuanyeArr.push(zyName)

        this.selectArr = []
        this.currentSelect = []
      }
    },
    delPutong(idx, item) {
      this.currentSelect.splice(idx, 1)
      this.selectArr.splice(idx, 1)
      this.$refs.search.delSearchItem(item)
    },
    searchDone(selectArr) {
      this.selectArr = this.selectArr.concat(selectArr)
      let hash = {}
      this.selectArr = this.selectArr.reduce((item, next) => {
        // hash[next.code] ? '' : ()
        if (!hash[next.code]) {
          hash[next.code] = true
          item.push(next)
        }
        return item
      }, [])
      this.clearZy()
    },
    // 下一步
    queryNext() {
      if (!this.selectArr.length && !this.zhuanyeArr.length) {
        this.$vux.toast.show({
          text: '请选择一种查询方式',
          type: 'text',
          width: '80%'
        })
        return
      }
      Utils.session('selectArr', this.selectArr)
      Utils.session('zhuanyeArr', this.zhuanyeArr)
      Utils.session('zhuanye', this.zhuanye)
      Utils.session('majorLevel', this.zhuanyeTab)
      this.$router.push({ name: 'queryStep4' })
    },
    // 专业门类切换
    zhuanyeClick() {
      this.clearZy()
    },
    // 清空已经选择的专业门类
    clearZy() {
      this.zhuanyeArr = []
      this.zhuanye = []
      if (this.zhuanyeTab === 0) {
        this.zhuanye = Array(this.bkData.length).fill(0);
      } else {
        this.zhuanye = Array(this.zkData.length).fill(0);
      }
    }
  }
}
</script>

<style lang="scss">
.vux-search_show {
  height: 100%;
}
.weui-search-bar {
  background-color: transparent !important;
  padding: 0 !important;
  .weui-search-bar__form {
    padding: 0.106667rem !important;
    background-color: transparent !important;
  }
  .weui-search-bar__label {
    background: #eee;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    line-height: 0.96rem;
    border-radius: 0.133333rem;
  }
}
.vux-search-fixed {
  .weui-search-bar {
    padding: 0.213333rem 0.266667rem !important;
  }
  .weui-search-bar__form:after {
    border-color: #999;
  }
  .weui-search-bar__cancel-btn {
    line-height: 0.96rem;
  }
  .weui-icon-search {
    left: 0.133333rem !important;
  }
  .weui-icon-clear {
    right: -0.213333rem !important;
  }
  .weui-cells.vux-search_show {
    .weui-cell:last-child {
      margin-bottom: 1.6rem;
    }
  }
}
.search-list-item {
  &.b {
    background-color: #ffeff0;
  }
  &.z {
    background-color: #edfbfe;
  }
  &::before {
    border-color: #999;
  }
}
</style>

<style lang="scss" scoped>
.q-header {
  padding: 0.4rem 0.4rem 0.266667rem;
  .tip {
    margin-top: 0.133333rem;
    color: #ff3000;
    font-size: 13px;
  }
}
.putong-wrap {
  padding-bottom: 0.133333rem !important;
}
.query-wrap {
  padding: 0 0.4rem;
  border-top: 0.213333rem solid #f2f2f2;
  .qw-title {
    font-size: 16px;
    color: #333;
    line-height: 0.853333rem;
    padding-top: 0.213333rem;
  }
  .qw-tip {
    color: #ff3000;
    margin-bottom: 0.4rem;
  }
  .pt-list {
    margin-top: 0.4rem;
    li {
      padding: 0.186667rem 0.32rem;
      font-size: 14px;
      background-color: #ffa440;
      border-radius: 0.08rem /* 3/37.5 */;
      display: inline-block;
      margin-right: 0.4rem;
      margin-bottom: 0.266667rem;
      position: relative;
      color: #fff;
      .i-close {
        position: absolute;
        top: -0.133333rem;
        right: -0.133333rem;
        color: #ff4316;
      }
    }
  }
  .zy-list {
    margin-top: 0.266667rem;
    li {
      width: 2.146667rem;
      height: 0.8rem;
      background-color: #bebebe;
      border-radius: 0.106667rem;
      margin-right: 0.2rem;
      float: left;
      font-size: 14px;
      color: #fff;
      text-align: center;
      line-height: 0.853333rem;
      margin-bottom: 0.426667rem;
      &.active {
        background-color: #ff8600;
        box-shadow: 0px 3px 10px 0px rgba(255, 134, 0, 0.25);
      }
      &:nth-child(4n) {
        margin-right: 0;
      }
    }
  }
}
.search-tip {
  font-size: 14px;
  text-align: center;
  padding-bottom: 0.266667rem;
  color: #f00;
}
.result-nodata {
  font-size: 14px;
  color: #666;
  padding: 1.333333rem 0 0;
  text-align: center;
}
.grey {
  position: relative;
  &:before {
    content: "";
    background-color: rgba(85, 85, 85, 0.25);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9;
  }
}
.zk-list {
  li {
    font-size: 12px !important;
    padding: 0 0.133333rem /* 5/37.5 */;
    line-height: 0.4rem /* 15/37.5 */ !important;
    height: 0.86rem !important;
    display: table;
    text-align: center;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
    .content {
      display: table-cell;
      vertical-align: middle;
      &.min {
        font-size: 13px;
      }
    }
  }
}
.zy-tab {
  padding: 0.266667rem /* 10/37.5 */ 0;
  .vux-button-tab-item-first:after,
  .vux-button-tab-item-last:after {
    border-color: #ccc;
  }
  .vux-button-group-current {
    background: #ff8600;
  }
}
.btn-next-group {
  margin-top: 0.266667rem /* 10/37.5 */;
}
</style>
